/*
* @Description:网络扩展-组织扩展
* @Author: lil
* @Date: 2021/11/22
**/
<template>
  <div>
    <!-- 表格 -->
    <el-table :data="tableData" border>
      <el-table-column type="index" label="序号" align="center" width="70">
      </el-table-column>
      <el-table-column prop="name" label="名字" align="center" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="domainName" label="域名" align="center" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="type" label="组织类型" align="center" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="hostName" label="主机" align="center" show-overflow-tooltip>
      </el-table-column>
      <el-table-column label="操作" align="center" width="180">
        <template slot-scope="scope">
          <el-button type="text" class="iconfont zfsoft-dianzibiaodan-danxuananniu"
            @click="chooseOrg(scope.$index, scope.row)">选择组织
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <!-- <el-pagination background :page-sizes="[100, 200, 300, 400]" :page-size="100"
      layout="total, sizes, prev, pager, next, jumper" :total="400">
    </el-pagination> -->
    <!-- 弹窗：选择组织 -->
    <el-dialog title="组织扩展" v-if="dialogVisible" :close-on-click-modal="false" :visible.sync="dialogVisible" width="45%"
      @close="closeOrgExtendDLG">
      <select-group :orgName='orgName' :orgHosts="orgHosts" @close-dialog="closeSelectGroup"></select-group>
    </el-dialog>
  </div>
</template>
<script>
  import selectGroup from './selectGroup'
  import {
    getOrgList
  } from '@/api/blockchain/networkmanage'
  export default {
    components: {
      selectGroup
    },

    data() {
      return {
        dialogVisible: false,
        orgName: '',
        orgHosts: '',
        tableData: [],
      };
    },

    mounted() {
      this.getOrgStatusList();
    },
    methods: {
      getOrgStatusList() {
        var _this = this;
        getOrgList().then(function (res) {
          _this.tableData = [];
          for (let i = 0; i < res.length; i++) {
            _this.tableData.push({
              name: '',
              domainName: '',
              type: '',
              hostName: ''
            });
            _this.tableData[i].name = res[i].name;
            _this.tableData[i].domainName = res[i].domain;
            _this.tableData[i].type = res[i].type;
            _this.tableData[i].hostName = res[i].hosts;
          }

        }).catch((err) => {
          console.log(err);
        });
      },

      chooseOrg(index, row) {
        var _this = this;
        _this.$confirm('确认选择该组织, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          closeOnClickModal: false,
          type: 'warning'
        }).then(() => {
          this.dialogVisible = true;
          _this.orgName = _this.tableData[index].name;
          _this.orgHosts = _this.tableData[index].hostName;

        }).catch(() => {

        })
      },
      closeOrgExtendDLG() {
        this.getOrgStatusList();
      },

      closeSelectGroup(val) {
        this.$emit('getSelectedVal', val);
        this.dialogVisible = false;
        this.getOrgStatusList();
      },
    }
  };

</script>
